<template>
<div class="app-container calendar-list-container">
   <el-row style="margin-bottom:20px">
      <el-col :span="24">
        <el-card class="box-card" shadow="never">
          <div style="widht:100%">
            <el-steps :active="stepActive" align-center>
              <el-step title="买家下单" :description="getTime(orderInfo.createTime)"></el-step>
              <el-step title="买家付款" :description="getTime(orderInfo.payTime)"></el-step>
              <el-step title="商家发货" :description="getTime(orderInfo.sendTime)"></el-step>
              <el-step title="交易完成" :description="getTime(orderInfo.acceptTime)"></el-step>
            </el-steps>
          </div>
        </el-card>
      </el-col>
   </el-row>
  <el-row>
    <el-col :span="8">
      <el-card class="box-card" shadow="never" style="height:400px;">
        <div slot="header" class="clearfix">
          <span>订单信息</span>
        </div>
        <div class="text item">
          <span>订单号:</span><span>{{orderInfo.orderSn}}</span>
        </div>
        <div class="text item">
          <span>创建时间:</span><span>{{orderInfo.createTime}}</span>
        </div>
        <div class="text item">
          <span>订单状态:</span><span>{{orderInfo.orderStatusName}}</span>
        </div>
        <div class="text item">
          <span>总金额:</span><span>{{orderInfo.productAmount | currency('￥')}}</span>
        </div>
        <div class="text item">
          <span>支付状态:</span><span>{{orderInfo.payStatusName}}</span>
        </div>
        <div class="text item">
          <span>支付时间:</span><span>{{orderInfo.payTime}}</span>
        </div>
        <div class="text item">
          <span>支付方式:</span><span>{{orderInfo.payTypeName}}</span>
        </div>
        <div class="text item">
          <span>签收时间:</span><span>{{orderInfo.acceptTime}}</span>
        </div>
        <div class="text item">
          <span>完成时间:</span><span>{{orderInfo.completionTime}}</span>
        </div>
        <div class="text item">
          <span>买家:</span><span>{{orderInfo.userName}}</span>
        </div>       
      </el-card>
    </el-col>
    <el-col :span="8">
      <el-card class="box-card" shadow="never" style="height:400px;">
        <div slot="header" class="clearfix">
          <div v-if="stepActive == 1"><i class="el-icon-warning"></i><span>订单状态:</span><span >商品已拍下，等待买家付款</span></div>
          <div v-if="stepActive == 2"><i class="el-icon-warning"></i><span>订单状态:</span><span>买家已付款,等待商家发货</span></div>
          <div v-if="stepActive == 3"><i class="el-icon-warning"></i><span>订单状态:</span><span>商家已发货，等待交易成功</span></div>
          <div v-if="orderStatus == -2"><i class="el-icon-warning"></i><span>订单状态:</span><span>交易关闭</span></div>
          <div v-if="stepActive == 4"><i class="el-icon-warning"></i><span>订单状态:</span><span>交易完成</span></div>
        </div>
        <div class="text item">
          <span v-if="stepActive === 1">如买家未在规定时间内付款，订单将按照设置逾期自动关闭；</span>
          <span v-if="stepActive === 2">买家已付款到平台待结算账户,请尽快发货,否则买家有权申请退款</span>
          <span v-if="stepActive === 3">买家如在 7天内 没有申请退款，交易将自动完成；</span>
          <span v-if="orderStatus === -2">订单已全额退款，交易自动关闭</span>
          <span v-if="stepActive === 4">已将货款结算至你的店铺余额账户，请注意查收。</span>
        </div>
        <div class="text item" v-if="orderStatus == -2">
          <span>订单退款金额：{{orderInfo.productAmount | currency('￥')}} 元</span>
        </div>
        <el-button v-if="orderManager_btn_cancel && stepActive == 1" size="small" type="success" @click="handleCancel()">关闭订单</el-button>
        <el-button v-if="orderManager_btn_send && stepActive == 2" size="small" type="success" @click="handleSend()">发货</el-button>
        <hr width="100%" style="border-bottom:1px dashed;border-top:0px;margin-top:150px;">
        <div class="text item">
          <span v-if="stepActive == 1">请务必等待订单状态变更为“买家已付款，等待卖家发货”后再进行发货。</span>
          <span v-if="stepActive == 2">买家已付款到平台待结算账户,请尽快发货,否则买家有权申请退款</span>
          <span v-if="stepActive == 3">交易已成功，如果买家提出售后要求，请积极与买家协商，做好售后服务。</span>
          <span v-if="stepActive == 4">交易成功后，有赞将把货款结算至你的店铺账户余额，你可申请提现；
请及时关注你发出的包裹状态，确保能配送至买家手中；
如果买家表示未收到货或者货物有问题，请及时联系买家积极处理，友好协商；</span>
        </div>
      </el-card>
    </el-col>
    <el-col :span="8">
      <el-card class="box-card" shadow="never" style="height:400px;">
        <div slot="header" class="clearfix">
          <span>物流信息</span>
        </div>
         <div class="text item">
          <span>收货人:</span><span>{{orderInfo.deliName}}</span>
        </div>
        <div class="text item">
          <span>电话:</span><span>{{orderInfo.deliTel}}</span>
        </div>
        <div class="text item">
          <span>收货地址:</span><span>{{orderInfo.deliAddr}}</span>
        </div>
        <div class="text item">
          <span>配送方式:</span><span>{{orderInfo.logisticsTypeName}}</span>
        </div>
        <div class="text item">
          <span>买家留言:</span><span>{{orderInfo.custRemark}}</span>
        </div>
        <div class="text item">
          <span>配送状态:</span><span>{{orderInfo.logisticsStatusName}}</span>
        </div>
        <div class="text item">
          <span>物流单号:</span><span>{{orderInfo.logisticsInt}}</span>
        </div>
        <div class="text item">
          <span>物流公司:</span><span v-if="orderInfo.logisticsCompany=='SFKD'">顺风快递</span>
                        <span v-else-if="orderInfo.logisticsCompany=='STKD'">申通快递</span>
                        <span v-else-if="orderInfo.logisticsCompany=='YTKD'">圆通快递</span>
                        <span v-else-if="orderInfo.logisticsCompany=='ZTKD'">中通快递</span>
                        <span v-else-if="orderInfo.logisticsCompany=='YDKD'">韵达快递</span>
        </div>
      </el-card>
    </el-col>
  </el-row>
  <el-table :key='tableKey' :data="orderItems" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%;margin-top:20px;">
    <el-table-column align="center" label="" width="200"> <template scope="scope">
          <img :src="imgBaseURL + scope.row.titleImage " min-width="70" height="70">
        </template> </el-table-column>
    <el-table-column width="438" align="center" label="商品"> <template scope="scope">
        <span>{{scope.row.goodsName}}</span>
      </template> </el-table-column>
    <el-table-column width="240" align="center" label="规格"> <template scope="scope">
        <span>{{scope.row.goodsSpecName}}</span>
      </template> </el-table-column>
    <el-table-column width="130" align="center" label="价格(元)"> <template scope="scope">
        <span>{{scope.row.unitPrice | currency('￥')}}</span>
      </template> </el-table-column>
    <el-table-column width="130" align="center" label="数量"> <template scope="scope">
            <span>{{scope.row.productNum}}</span>
          </template> </el-table-column>
    <el-table-column width="130" align="center" label="小计(元)"> <template scope="scope">
            <span>{{scope.row.totalPrice | currency('￥')}}</span>
          </template> </el-table-column>
    <!--
    <el-table-column width="120" align="center" label="状态"> <template scope="scope">
            <span>{{scope.row.refundState}}</span>
          </template> </el-table-column>-->
  </el-table>
  <div style="float:right;margin-top:10px;margin-right:10px;">
    <div class="text item">
      <span>商品总价:</span><span>{{orderInfo.productAmount | currency('￥')}}</span>
    </div>
    <div class="text item">
       <span>运费:</span><span>{{orderInfo.freightAmount | currency('￥')}}</span>
    </div>
    <div class="text item">
        <span>优惠:</span><span>￥0.00</span>
    </div>
    <div class="text item">
      <span>订单金额:</span><span>{{orderInfo.productAmount | currency('￥')}}</span>
    </div>
  </div>

  <el-dialog :title="cancelDialogTitle" :visible.sync="cancelDialogFormVisible" width="20%">
    <el-form :model="cancelForm" :rules="rules" ref="cancelForm" label-width="0px">
      <el-form-item prop="cancelReason">
        <el-select v-model="cancelForm.cancelReason" placeholder="请选择一个关闭订单理由" width="300">
          <el-option v-for="item in  cancelReasonOptions" :key="item.label" :label="item.label" :value="item.label"> </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel('cancelForm')">取 消</el-button>
      <el-button type="primary" @click="updateCancel('cancelForm')">确 定</el-button>
    </div>
  </el-dialog>

  <el-dialog :title="sendDialogTitle" :visible.sync="sendDialogFormVisible" @close="closeSendDialog">
    <el-form :model="sendForm" :rules="rules" ref="sendForm" label-width="100px">
      <el-table :key='sendTableKey' :data="sendForm.items" v-loading.body="sendListLoading" border fit highlight-current-row style="width: 100%">
        <el-table-column align="center" label="商品" width="325"> <template scope="scope">
          <span>{{scope.row.title}}</span>
        </template> </el-table-column>
        <el-table-column align="center" label="数量" width="200"> <template scope="scope">
          <span>{{scope.row.productNum}}</span>
        </template> </el-table-column>
        <el-table-column align="center" label="状态" width="200">
          <span>未发货</span>
        </el-table-column>
      </el-table>
      <el-row class="el-row-margin">
        <el-col :span="4"><label>收货信息</label></el-col>
        <el-col :span="16">
          <el-row>
            <el-col :span="4"><span>配送方式</span></el-col>
            <el-col :span="16">
              <span>快递</span>
            </el-col>
          </el-row>
          <el-row class="el-row-margin10">
            <el-col :span="4"><span>收货人</span></el-col>
            <el-col :span="16"><span>{{sendForm.deliName}}  {{sendForm.deliTel}}</span></el-col>
          </el-row>
          <el-row class="el-row-margin10">
            <el-col :span="4"><span>收货地址</span></el-col>
            <el-col :span="16"><span>{{sendForm.deliAddr}}</span></el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row class="el-row-margin">
        <el-col :span="4"><label>收货方式</label></el-col>
        <el-col :span="16">
          <el-row>
            <el-col>
              <el-form-item class="marginLeft100">
                <el-radio-group class="filter-item" v-model="sendForm.logisticsType" @change="changeLogisticsType">
                  <el-radio :label="1">自己联系快递</el-radio>
                  <el-radio :label="2">无需物流</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="16" class="marginLeft10" v-if="logisticsCompanyVisible">
              <el-form-item label="物流公司:">
                <el-select class="filter-item" v-model="sendForm.logisticsCompany" placeholder="请选择物流公司" @visible-change="$forceUpdate()">
                  <el-option v-for="item in  picklistOptions" :key="item.picklistValue" :label="item.picklistText" :value="item.picklistValue"> </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="快递单号:">
                <el-input v-model="sendForm.logisticsInt" placeholder="请输入快递单号"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancelSend('sendForm')">取 消</el-button>
      <el-button type="primary" @click="updateSend('sendForm')">确 定</el-button>
    </div>
  </el-dialog>
</div>
</template>

<script>
import {
  getObj,
  putObj,
  sendObj
} from 'api/shop/order/order/index';
import { mapGetters } from 'vuex';
import {getPicklist} from 'api/param/picklist/index';
import {currency} from '@/utils/index';
import { getToken } from 'utils/auth';
export default {
  name: 'orderDetail',
  data() {
    return {
      imgBaseURL: this.GLOBAL.imgBaseURL,
      orderSn:undefined,
      orderInfo:[],
      orderItems:[],
      stepActive: 1,
      orderStatus:undefined,
      cancelForm: {
        orderSn: undefined,
        orderStatus:-2,
        cancelReason: undefined
      },
      sendForm: {
        orderSn: undefined,
        orderStatus: 4,
        logisticsType:undefined,
        logisticsStatus:3,
        logisticsCompany:'',
        logisticsInt:undefined,
        sendTime:new Date(),
        items:null,
        deliName:undefined,
        deliTel:undefined,
        deliAddr:undefined
      },
      rules: {
        cancelReason:[
          {
            required: true,
            message: '请选择一个取消订单理由',
            trigger: 'change'
          }
        ]
      },
      sendListLoading:false,
      cancelDialogFormVisible: false,
      sendDialogFormVisible:false,
      logisticsCompanyVisible:true,
      orderManager_btn_cancel: false,
      orderManager_btn_send: false,
      cancelDialogTitle: '取消订单',
      sendDialogTitle:'订单发货',
      picklistOptions:[],
      picklistCode: 'logisticsComName',
      cancelReasonOptions:[
        {label: '无法联系买家'},
        {label: '买家误拍或重拍了'},
        {label: '买家无诚意完成交易'},
        {label: '已通过银行线下汇款'},
        {label: '已通过同城见面交易'},
        {label: '已通过货到付款交易'},
        {label: '已通过网上银行直接汇款'},
        {label: '已经缺货无法交易'}
      ],
      listLoading: true,
      tableKey: 0,
      sendTableKey:0
    }
  },
  computed: {
    ...mapGetters([
      'elements'
    ])
  },
  created() {
    this.orderSn = this.$route.query.orderSn
    this.getOrderInfo();
    this.getPicklist();
    this.orderManager_btn_cancel = this.elements['orderManager:btn_cancel'];
    this.orderManager_btn_send = this.elements['orderManager:btn_send'];
  },
  filters:{
    currency: currency
  },
  methods: {
    getOrderInfo() {
      getObj(this.orderSn)
        .then(response => {
          this.listLoading = false;
          this.orderInfo = response.data;
          this.orderItems = response.data.items;
          if(this.orderInfo.orderStatus==1 && this.orderInfo.payStatus == 0){
            this.stepActive = 1
          }else if(this.orderInfo.payStatus == 2 && this.orderInfo.payStatus == 2 && this.orderInfo.logisticsStatus == 0){
            this.stepActive = 2
          }else if(this.orderInfo.orderStatus==2 && this.orderInfo.payStatus == 2 && this.orderInfo.logisticsStatus == 3){
            this.stepActive = 3
          }else if(this.orderInfo.orderStatus==10 && this.orderInfo.payStatus == 2){
            this.stepActive = 4
          }
          this.orderStatus = this.orderInfo.orderStatus;
        });
    },
    getPicklist() {
      getPicklist(this.picklistCode)
        .then(response => {
          this.picklistOptions = response.data;
        })
    },
    handleCancel() {
      this.resetCancelTemp();
      this.cancelForm.orderSn = this.orderSn;
      this.cancelDialogFormVisible = true;
    },
    handleSend() {
      this.resetSendTemp();
      this.sendListLoading = true;
      this.sendDialogFormVisible = true;
       getObj(this.orderSn)
        .then(response => {
          this.sendForm.orderSn = this.orderSn;
          this.sendForm = response.data;
          this.sendListLoading = false;
        });
    },
    cancel(formName) {
      this.cancelDialogFormVisible = false;
      this.$refs[formName].resetFields();
    },
    cancelSend(formName) {
      this.sendDialogFormVisible = false;
      this.sendListLoading = false;
      this.$refs[formName].resetFields();
    },
    updateCancel(formName) {
      const set = this.$refs;
      set[formName].validate(valid => {
        if (valid) {
          this.cancelDialogFormVisible = false;
          putObj(this.cancelForm.orderSn, this.cancelForm).then(() => {
            this.cancelDialogFormVisible = false;
            this.getList();
            this.$notify({
              title: '成功',
              message: '创建成功',
              type: 'success',
              duration: 2000
            });
          });
        } else {
          return false;
        }
      });
    },
    updateSend(formName) {
      const set = this.$refs;
      if(this.sendForm.logisticsType == 1){
        if(this.sendForm.logisticsCompany == null || this.sendForm.logisticsCompany == ''){
          this.$notify.error({
              title: '请选择快递公司',
              message: '验证提示',
              type: 'error',
              showClose: false,
              duration: 2000
            });
            return false;
        }
        if(this.sendForm.logisticsInt == null || this.sendForm.logisticsInt == ''){
          this.$notify.error({
              title: '请选择快递单号',
              message: '验证提示',
              type: 'error',
              showClose: false,
              duration: 2000
            });
            return false;
        }
      }
      set[formName].validate(valid => {
        if (valid) {
          this.sendForm.logisticsStatus = 3;
          sendObj(this.sendForm.orderSn, this.sendForm).then(response=>{
            if(response.status==200){
             this.sendDialogFormVisible = false;
             this.$router.push({path: '#/shop/order/orderDetail',query: {orderSn: this.sendForm.orderSn}});
             this.$notify({
                title: '成功',
                message: '发货成功',
                type: 'success',
                duration: 2000
              });
            }else{
             this.sendDialogFormVisible = false;
             this.$router.push({path: '#/shop/order/orderDetail',query: {orderSn: this.sendForm.orderSn}});
             this.$notify({
              title: '失败',
              message: '数据出现异常!',
              type: 'error',
              duration: 2000
             });
            }
          })
        } else {
          return false;
        }
      });
    },
    resetCancelTemp() {
      this.cancelForm = {
        orderStatus:-2,
        cancelReason: undefined
      };
    },
    resetSendTemp() {
      this.sendForm = {
        orderSn: undefined,
        orderStatus: 4,
        logisticsType:undefined,
        logisticsStatus:3,
        logisticsCompany:'',
        logisticsInt:undefined,
        sendTime:new Date()
      };
    },
    changeLogisticsType(value){
      if(value == 1){
        this.logisticsCompanyVisible = true;
      }else{
        this.logisticsCompanyVisible = false;
      }
    },
    closeSendDialog(){
      this.sendListLoading = false;
    },
    getTime(createTime){
      if(createTime == null || createTime == undefined){
        return "";
      }
      return createTime;
    }
  }
}
</script>
<style>
.text {
  font-size: 14px;
}
.item {
  margin-bottom: 10px;
}
.cancleDialog {
  width: 50%;
}
.el-row-margin{
  margin-top: 30px;
}
.el-row-margin10{
  margin-top: 10px;
}
.marginLeft100{
  margin-left: -100px;
}
.marginLeft10{
  margin-left: -10px;
}
</style>